<template>
	<div class="question-basic">
		<span class="questionTypeName">{{ question.questionTypeName }}</span>
		<ve-parse-replace
			v-if="question.questionType === 'CF'"
			:article="JSON.parse(question.questionContent).title"
			question-type="CF"
		/>
		<ve-parse-replace
			v-else-if="question.questionType === 'BC'"
			:article="JSON.parse(question.questionContent).title"
			question-type="BC"
		/>
		<ve-parse v-else :article="JSON.parse(question.questionContent).title" />
		<div
			v-if="
				question.questionType !== 'J' && question.questionType !== 'BC'
			"
		>
			<div
				v-for="(option, index) of JSON.parse(
					question.questionContent
				).option"
				:key="index"
			>
				<div>
					<ve-parse :article="option.type" />:
					<ve-parse :article="option.content" />
				</div>
			</div>
		</div>
		<div class="option-wrap" v-if="question.questionType === 'BC'">
			<div
				class="option-item"
				v-for="(option, index) in JSON.parse(
					question.questionContent
				).option"
				:key="index"
			>
				<ve-parse :article="option.content" />
			</div>
		</div>
		<div
			v-if="
				question.questionType !== 'J' && question.questionType !== 'F'
			"
		>
			<span class="colorred">【参考答案】</span>
			<ve-parse :article="question.questionAnswer" />
		</div>
		<div v-if="question.questionType === 'J'">
			<span class="colorred">【参考答案】</span>
			{{ question.questionAnswer === "1" ? "正确" : "错误" }}
		</div>
		<div v-if="question.questionType === 'F'">
			<span class="colorred">【参考答案】</span>

			<ve-parse :article="question.questionAnswer" />
		</div>
		<span class="colorred">【答案解析】</span>
		<ve-parse :article="question.questionAnswerparse" />
	</div>
</template>
<script>
    // 题库独立题型展示组件
    import VeParseReplace from './veParseReplace.vue';
	export default {
        name:'qb-show-basic',
        components:{
            VeParseReplace
        },
		props: {
			question: {
				type: Object,
				default: () => {}
			}
		}
	};
</script>
<style lang="less" scoped>
	.baseQuestion {
		line-height: 25px;
	}

	.colorred {
		color: red;
	}

	.boderbottom {
		border-bottom: 1px dashed #ddd;
	}

	.questionTypeName {
		color: #1296db;
	}

	.calledcpunt {
		color: #1296db;
	}

	.questionlist {
		li {
			border-bottom: 1px dashed #ddd;
			&:last-child {
				border-bottom: 0;
			}

			.btngroup {
				position: relative;
				.deleteanddisable {
					width: 47px;
					position: absolute;
					right: 0;
					top: 25px;
					background: #fff;
					border: 1px solid #ccc;
					z-index: 33;
				}
			}
		}
	}
	.option-wrap {
		display: flex;
		flex-wrap: wrap;
		margin: 5px 0;
		.option-item {
			padding: 13px 10px;
			background: #1296db;
			margin-right: 10px;
			margin-bottom: 10px;
			color: #fff;
			font-size: 12px;
			border-radius: 1px;
			line-height: 0;
		}
	}
	/deep/.el-button + .el-button {
		margin-left: 0px;
	}
</style>
